<template>
  <div class="container">
    <div class="main">
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/post' }"
            >旅游攻略</el-breadcrumb-item
          >
          <el-breadcrumb-item><a href="/">攻略详情</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 文章标题 -->
      <h1>{{ postData.title }}</h1>

      <!-- 文章发布时间 -->
      <div class="post_info">
        <span>攻略：{{ postData.updated_at }}</span>
        <span>阅读：{{ postData.watch }}</span>
      </div>

      <!-- 文章内容 -->
      <div class="post_content" v-html="postData.content"></div>

      <!-- 评论与分享 -->
      <div class="post_ctrl">
        <div class="icon">
          <div class="ctrl-item" @click="textareaFocus">
            <i class="el-icon-edit-outline iconfont"></i>
            <p>评论({{ postData.comments.length }})</p>
          </div>
          <div class="ctrl-item" @click="articleShare">
            <i class="el-icon-share iconfont"></i>
            <p>分享</p>
          </div>
        </div>
      </div>

      <!-- 文章评论区 -->
      <div class="post_cmt">
        <h4 class="cmt_title" id="qweqwe">评论</h4>
        <!-- 回复@replyName -->
        <transition>
          <span v-if="replyName" class="reply" id="cancel_animate">
            回复 @{{ replyName }} &nbsp;
            <i @click="cancelReply" class="el-icon-close"></i>
          </span>
        </transition>
        <div class="cmt_input">
          <el-input
            :rows="2"
            resize="none"
            ref="textarea"
            type="textarea"
            v-model="textarea"
            placeholder="说点什么吧..."
          >
          </el-input>
        </div>

        <div class="cmt_upload">
          <!-- 上传图片 -->
          <div class="cmt_file">
            <el-upload
              name="files"
              ref="imgUpload"
              list-type="picture-card"
              :action="`${$axios.defaults.baseURL}/upload`"
              :on-preview="handlePictureCardPreview"
              :on-success="pictureUpload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>

          <!-- 提交按钮 -->
          <div class="cmt_submit">
            <el-button type="primary" @click="submitCmt">提交</el-button>
          </div>
        </div>
        <CommentItem :postId="postId" :loading="loading" @CmtReply="getReply" />
      </div>
    </div>

    <div class="aside">
      <ArticleAside :postId="postId" @jumpRecommend="loadPage" />
    </div>
  </div>
</template>

<script>
import "animate.css";
import Moment from "moment";
import CommentItem from "@/components/post/commentItem";
import ArticleAside from "@/components/post/articleAside";

export default {
  components: {
    CommentItem,
    ArticleAside,
  },
  data() {
    return {
      postId: this.$route.query.id,
      textarea: "",
      dialogImageUrl: "",
      dialogVisible: false,
      replyName: "",
      loading: false,

      postData: {
        comments: [],
      },

      comment: {
        content: "",
        pics: [],
        follow: "",
        post: this.$route.query.id,
      },
    };
  },

  mounted() {
    this.loadPage(this.$route.query.id);
  },

  methods: {
    // 封装获取文章的请求
    init(id) {
      this.$axios({
        url: "/posts",
        params: { id },
      }).then((res) => {
        this.postData = res.data.data[0];
        this.postData.updated_at = Moment(this.postData.updated_at).format(
          "YYYY-MM-DD hh:mm"
        );
      });
    },

    loadPage(id) {
      this.clearUpload();
      this.postId = id;
      this.init(id);
    },

    // 文章评论（点击后评论文本框获取焦点）
    textareaFocus() {
      this.$refs.textarea.focus();
    },

    // 文章分享
    articleShare() {
      this.$message.warning("暂不支持分享");
    },

    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 文件上传成功时的钩子
    pictureUpload(response, file, fileList) {
      this.comment.pics.push(...response);
    },

    // 评论提交
    submitCmt() {
      this.$store.commit("user/setBackurl", location.href);
      this.comment.content = this.textarea;
      if (this.textarea.trim() === "" && this.$refs.imgUpload === "") {
        this.$message.warning("内容不能为空");
        return;
      }
      if (this.$store.state.user.userinfo.token) {
        this.$axios({
          method: "post",
          url: "/comments",
          headers: {
            Authorization: "Bearer " + this.$store.state.user.userinfo.token,
          },
          data: this.comment,
        }).then((res) => {
          if (res.data.message === "提交成功") {
            this.loading = !this.loading;
            this.clearUpload();
            this.postData.comments.length++;
          }
        });
      } else {
        this.$message.warning("请先登录");
      }
    },

    // 回复
    getReply(data) {
      this.replyName = data.account.nickname;
      this.comment.follow = data.id;
      document.getElementById("qweqwe").scrollIntoView();
    },

    // 取消回复
    cancelReply() {
      this.clearUpload();
      document
        .getElementById("cancel_animate")
        .classList.add("animate__animated", "animate__flipOutY");
    },

    // 清除数据
    clearUpload() {
      this.replyName = "";
      this.$refs.imgUpload.clearFiles();
      this.textarea = "";
      this.comment = {
        content: "",
        pics: [],
        follow: "",
        post: this.$route.query.id,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
  justify-content: space-between;

  .main {
    flex: 7;

    h1 {
      padding: 20px 0;
      border-bottom: 1px solid #ddd;
    }

    .post_info {
      color: #999;
      padding: 20px;
      text-align: right;

      span {
        margin-left: 20px;
      }
    }

    .post_content {
      line-height: 1.5;

      /deep/ img {
        display: block;
        max-width: 700px;
        margin: 10px 0;
        border-radius: 12px;
      }
    }

    .post_ctrl {
      padding: 50px 0 30px;

      .icon {
        display: flex;
        justify-content: center;

        .ctrl-item {
          margin: 0 20px;
          text-align: center;
          cursor: pointer;

          .iconfont {
            font-size: 35px;
            color: orange;
          }

          p {
            font-size: 14px;
            color: #999;
          }
        }
      }
    }

    .post_cmt {
      h4 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: normal;
      }
      .reply {
        display: inline-block;
        // width: 120px;
        height: 32px;
        padding: 0 10px;
        margin-bottom: 10px;
        line-height: 30px;
        font-size: 12px;
        border-radius: 4px;
        box-sizing: border-box;
        border: 1px solid rgba(64, 158, 255, 0.2);
        background-color: rgba(144, 147, 153, 0.1);
        border-color: rgba(144, 147, 153, 0.2);
        white-space: nowrap;
        color: #909399;
        .el-icon-close {
          cursor: pointer;
          display: inline-block;
          padding: 0 1px;
          &:hover {
            background-color: #999;
            border-radius: 30px;
            color: #fff;
            text-align: center;
            line-height: 15px;
          }
        }
      }
      .el-textarea {
        margin-bottom: 10px;
      }
      /deep/.el-upload-list--picture-card .el-upload-list__item {
        height: 100px;
        width: 100px;
      }
      /deep/.el-upload--picture-card {
        height: 100px;
        width: 100px;
        line-height: 100px;
      }
      /deep/.el-upload-list__item-thumbnail {
        height: 100px;
        width: 100px;
      }
      .cmt_upload {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;

        .el-button--primary {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 56px;
          height: 28px;
          font-size: 12px;
        }
      }
    }
  }

  .aside {
    flex: 3;
  }
}
</style>